<template>
  <div class="home">
    <div class="test-header">
      <div
        :class="['h-item', { active: curComponent === item }]"
        v-for="item in testComponents"
        :key="item"
        @click="clickItem(item)"
      >
        {{ item }}
      </div>
    </div>
    <div v-if="curComponent !== 'test-suspense'">
      <component :is="curComponent" />
    </div>
    <div v-else>
      <Suspense>
        <template #default>
          <test-suspense></test-suspense>
        </template>
        <template #fallback>
          <div class="test-font">loading...</div>
        </template>
      </Suspense>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onErrorCaptured } from "vue";
export default defineComponent({
  name: "Home",
  data() {
    return {
      testComponents: [
        "test-ref",
        "test-reactive",
        "test-computed",
        "test-lifecycle",
        "test-watch",
        "test-hooks",
        "test-teleport",
        "test-suspense",
      ],
      curComponent: "test-ref",
    };
  },
  setup() {
    onErrorCaptured((err) => {
      console.log(err);
    });
  },
  mounted() {
    console.log(this.$http);
  },
  methods: {
    clickItem(item: string) {
      this.curComponent = item;
    },
  },
});
</script>
<style lang="scss" scoped>
.test-header {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 30px;
  background: yellowgreen;
}
.h-item {
  padding: 10px 30px;
  margin: 0 10px;
  background: #fff;
  color: #999;
  cursor: pointer;
  &.active {
    background: red;
    color: #fff;
  }
}
</style>
